<template>
  <div class="semifinals">
    <ul class="semifinals_one">
      <li class="first">1/4决赛</li>
      <li class="nor" v-for="(item, index) in datalist.eightlist" :key="index" v-if="index < 2">
        <div class="vslist">
          <p><span class="leab">{{item.hostSeed}}</span>{{item.host}}</p>
          <p class="vs_text">VS</p>
          <p>{{item.guest}}</p>
        </div>
        <el-button size="small score-btn" class="orange-btn scorebtn">录入比分</el-button>
      </li>
    </ul>
    <ul class="semifinals_two">
      <li class="first">半决赛</li>
      <li class="nor">
        <div class="vslist">
          <p><span class="leab">{{datalist.fourList[0].hostSeed}}</span>{{datalist.fourList[0].host}}</p>
          <p class="vs_text">VS</p>
          <p><span class="leab">{{datalist.fourList[0].guestSeed}}</span>{{datalist.fourList[0].guest}}</p>
        </div>
        <el-button size="small score-btn" class="orange-btn scorebtn">录入比分</el-button>
      </li>
    </ul>
    <ul class="semifinals_middle">
      <li class="first">决赛<br><span>{{datalist.oneList.host}}</span></li>
      <ul>
        <li class="nor">
          <div class="vslist">
          <p><span class="leab">{{datalist.twoList.hostSeed}}</span>{{datalist.twoList.host}}</p>
          <p class="vs_text">VS</p>
          <p><span class="leab">{{datalist.twoList.guestSeed}}</span>{{datalist.twoList.guest}}</p>
        </div>
          <el-button size="small score-btn" class="orange-btn scorebtn">录入比分</el-button>
        </li>
      </ul>
    </ul>
    <ul class="semifinals_two">
      <li class="first">半决赛</li>
      <li class="nor">
        <div class="vslist">
          <p><span class="leab">{{datalist.fourList[1].hostSeed}}</span>{{datalist.fourList[1].host}}</p>
          <p class="vs_text">VS</p>
          <p><span class="leab">{{datalist.fourList[1].guestSeed}}</span>{{datalist.fourList[1].guest}}</p>
        </div>
        <el-button size="small score-btn" class="orange-btn scorebtn">录入比分</el-button>
      </li>
    </ul>
    <ul class="semifinals_one">
      <li class="first">1/4决赛</li>
      <li class="nor" v-for="(item, index) in datalist.eightlist" :key="index" v-if="index >= 2">
        <div class="vslist">
          <p><span class="leab">{{item.hostSeed}}</span>{{item.host}}</p>
          <p class="vs_text">VS</p>
          <p><span class="leab">{{item.guestSeed}}</span>{{item.guest}}</p>
        </div>
        <el-button size="small score-btn" class="orange-btn scorebtn">录入比分</el-button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      datalist: {
        eightlist: [{
          host: '穆雷(英国)',
          hostSeed: 9,
          guest: '马琴科(乌克兰)',
          guestSeed: 6
        },
        {
          host: '穆雷(英国)2',
          hostSeed: 9,
          guest: '马琴科(乌克兰)',
          guestSeed: 6
        },
        {
          host: '穆雷(英国)3',
          hostSeed: 9,
          guest: '马琴科(乌克兰)',
          guestSeed: 6
        },
        {
          host: '穆雷(英国)4',
          hostSeed: 9,
          guest: '马琴科(乌克兰)',
          guestSeed: 6
        }],
        fourList: [{
          host: '穆雷(英国)--半决赛',
          hostSeed: 9,
          guest: '马琴科(乌克兰)',
          guestSeed: 6
        },
        {
          host: '穆雷(英国)--半决赛',
          hostSeed: 9,
          guest: '马琴科(乌克兰)',
          guestSeed: 6
        }],
        twoList: {
          host: '穆雷(英国)--决赛',
          hostSeed: 9,
          guest: '马琴科(乌克兰)',
          guestSeed: 6
        },
        oneList: {
          host: '冠军',
          hostSeed: 9
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.semifinals{
  font-size: 12px;
  display: inline-table;
  li.first{
    text-align: center;
  }
  span.leab{
    display: inline-block;
    height:18px;
    line-height:18px;
    padding: 0 5px;
    border-radius: 4px;
    margin-right:5px;
    color:#fff;
    background: #ff8b2f;
  }
  .vslist{
    width:90%;
    padding: 0 5%;
    position: absolute;
    margin: auto;
    top: 50%; left: 50%;  
    -webkit-transform: translate(-50%,-50%);  
    -ms-transform: translate(-50%,-50%);  
    transform: translate(-50%,-50%); 
  }
  .vs_text{
    text-indent: 30px;
  }
  .score-btn{
    position: absolute;
    right:8px;
    top:50%;
    margin-top:-15px;
  }
  ul{
    float:left;
  }
  .semifinals_one{
    width:160px;
    li{
      border:1px solid #ebebeb;
      margin-top: -1px;
    }
    li.first{
      height:40px;
      line-height: 40px;
    }
    li.nor{
      height:239px;
      position: relative;
       .vs_text{
        margin: 20px 0;
      }
    }
  }
  .semifinals_two{
    width:160px;
    li{
      border:1px solid #ebebeb;
      margin: -1px;
    }
    li.first{
      height:40px;
      line-height: 40px;
    }
    li.nor{
      height:477px;
      position: relative;
      .vs_text{
        margin: 50px 0;
      }
    }
  }
  .semifinals_middle{
    width:192px;
    li.first{
      height:65px;
      border-top:1px solid #ebebeb;
      border-bottom:1px solid #ebebeb;
      margin-top: -1px;
      line-height: 1.6;
      padding-top: 10px;
      span{
        color: #666;
      }
    }
    li.nor{
      height:451px;
      width:192px;
      border-bottom:1px solid #ebebeb;
      position: relative;
      .vs_text{
        margin: 80px 0;
      }
    }
  }
}
</style>
